<template>
  <div class="content">
    <div class="header">
      <h3>部门列表</h3>
      <el-button type="primary" @click="newUserClick">新建部门</el-button>
    </div>

    <div class="table">
      <el-table :data="pageList" border style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column type="index" label="序号" align="center" width="60" />
        <el-table-column prop="name" label="部门名称" align="center" width="150" />
        <el-table-column prop="leader" label="部门领导" align="center" width="150" />
        <el-table-column prop="parentId" label="上级部门" align="center" width="150" />
        <el-table-column prop="createAt" label="创建时间" align="center">
          <template #default="scope">
            {{ formatUTC(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateAt" label="更新时间" align="center">
          <template #default="scope">
            {{ formatUTC(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160" l>
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              icon="edit"
              link
              @click="handeleditBtnClick(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              size="small"
              icon="DeleteFilled"
              link
              @click="handelDeleteBtnClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pageination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="sizes, prev, pager, next, jumper,total,"
        :total="pageTotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineEmits, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'

import { formatUTC } from '@/utils/format'

import useStytem from '@/store/main/system/system'

const emits = defineEmits(['showModal', 'editModal'])
const systemStore = useStytem()
const currentPage = ref(1)
const pageSize = ref(10)

const { pageList, pageTotalCount } = storeToRefs(systemStore)

// 发送网络请求
getPageListData()

// 页码
function handleSizeChange() {
  getPageListData()
}
function handleCurrentChange() {
  getPageListData()
}

// 将页码作为请求参数发送
function getPageListData(format?: any) {
  const size = pageSize.value
  const offset = (currentPage.value - 1) * size
  systemStore.postPageListAction('department', { offset, size, ...format })
}

// 新建用户的事件
function newUserClick() {
  emits('showModal')
}
//删除按钮
async function handelDeleteBtnClick(id: number) {
  const result = await systemStore.deletePageByIdAction('department', id)
  if (result.code === 0) {
    ElMessage({
      message: '用户删除成功',
      type: 'success'
    })
  } else if (result.code === -1002) {
    ElMessage({
      message: '请不要删除测试用户',
      type: 'error'
    })
  }
}

//编辑按钮
function handeleditBtnClick(rowData: any) {
  emits('editModal', rowData)
}

// 切换用户是否禁用
function changeUserState(rowData: any) {
  rowData.enable = rowData.enable === 0 ? 1 : 0
  systemStore.editUserAction(rowData.id, { enable: rowData.enable })
}

// 每30s中重新请求列表数据

const timer = setInterval(() => {
  getPageListData()
}, 30000)

onUnmounted(() => {
  clearInterval(timer)
})

defineExpose({ getPageListData })
</script>

<style lang="scss" scoped>
.content {
  margin-top: 15px;
  padding: 20px;
  background-color: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
}
.table {
  :deep(.el-table__cell) {
    padding: 12px 0 !important;
  }
}
.pageination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
